<!--
 * @Author: gaotang
 * @Date: 2025年01月03日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2025-01-03 18:54:52
-->
<template>
  <Echart v-if="pageflag" :options="options" class="left_center_inner" ref="charts" height="300px" isClick
    @chartClick="chartClick" />
  <Reacquire v-else @onclick="getData" style="line-height: 300px">
    重新获取
  </Reacquire>
</template>

<script>
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';
import { graphic } from 'echarts';

export default {
  name: 'ALeftLeftBigBottomLeft',
  data() {
    return {
      options: {},
      countUserNumData: {
        axisData: ['临沂-北京', '临沂-上海', '临沂-杭州', '临沂-苏州', '临沂-济南', '临沂-青岛', '临沂-烟台'],
        seriesData: [59, 54, 52, 47, 45, 44, 38],
      },
      pageflag: true,
      timer: null,
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() {
    this.clearData();
  },
  methods: {

    chartClick(params) {
      this.$emit('chartClick', params);
    },
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true;
      this.init(this.countUserNumData);
    },
    //轮询
    switper() {
      if (this.timer) {
        return;
      }
      let looper = (a) => {
        this.getData();
      };
      this.timer = setInterval(
        looper,
        2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
      );
      let myChart = this.$refs.charts.chart;
      myChart.on('mouseover', (params) => {
        this.clearData();
      });
      myChart.on('mouseout', (params) => {
        this.timer = setInterval(
          looper,
          2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
        );
      });
    },
    init(currentData) {
      let axisData = currentData.axisData;
      let seriesData = [
        [...currentData.seriesData],
      ];
      const options = {
        grid: {
          top: '11%',
          left: '4%',
          right: '4%',
          bottom: '12%',
          containLabel: true,
        },
        legend: {
          show: true,
          top: '0%',
          right: '4%',
          icon: 'rect',
          itemWidth: 12,
          itemHeight: 6,
          itemGap: 10,
          textStyle: legend.textStyle,
          data: ['条'],
        },
        xAxis: {
          type: 'value', // 将 x 轴设置为数值轴
          // max: 8000,
          // min: 100,//
          // interval: 2000,
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false, // 不显示下切线
          },
          axisLabel: xAxis.axisLabel,
          axisLine: {
            lineStyle: {
              background: 'rgba(176, 215, 255, 0.4)',
            },
          },
        },
        yAxis: {
          type: 'category',
          data: axisData,
          // boundaryGap: false,
          // boundaryGap: true,
          axisLabel: yAxis.axisLabel,
          axisLine: {
            show: false,
            // interval: 1,
            lineStyle: {
              color: 'rgba(0,0,0,0.5)',
            },
          },
          splitLine: {
            show: true,
            // interval: 1,
            lineStyle: {
              color: ['rgba(176, 215, 255, 0.2)'],
              width: 1,
              type: 'dashed',
            },
          },
          // splitLine: {
          //   show: false,
          // },
          axisTick: {
            show: false,
          },
        },
        series: [],
      };
      const series = [
        {
          name: '条',
          type: 'bar',
          barWidth: 5,
          // 动画配置
          animation: true,
          animationDuration: 2000,
          animationEasing: 'quarticInOut',
          animationDelay: function (idx) {
            return idx * 150;
          },
          showBackground: true,
          smooth: false,
          showSymbol: true,
          data: seriesData[0],
          itemStyle: {
            normal: {
              // color: "#38FFBA",
              // color: 'rgba(0,219,254, .7)',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#1EE7E7',
                  },
                  {
                    offset: 1,
                    color: '#3F95CE',
                  },
                ],
                globalCoord: false,
              },
            },
          },
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          label: {
            show: false,
          },
        }
      ];
      options.series = series;
      this.options = options;
    },
  },
};
</script>
<style lang="scss" scoped></style>
